.chat-home {
    .chat-name {
        margin-top: 292rpx;
        color: rgba(255, 131, 60, 1);
        letter-spacing: -0.43px;
        font-size: 36rpx;
        text-align: center;
    }

    .hd-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 112rpx;

        .hd-img {
            width: 144rpx;
            height: 144rpx;
            border-radius: 50%;
        }

        .down {
            width: 48rpx;
            height: 48rpx;
        }
    }

    .user-wrap {
        margin-top: 54rpx;

        .name {
            width: 480rpx;
            height: 96rpx;
            margin: 0 auto;
            background: rgba(242, 242, 242, 1);
            background-blend-mode: normal;
            border-radius: 24rpx;

            color: rgba(25, 29, 35, 1);
            letter-spacing: -0.43px;
            font-size: 36rpx;
            text-align: center;

        }
    }

    .join {
        margin: 194rpx auto 0 auto;
        width: 200rpx;
        height: 200rpx;
        background: rgba(255, 131, 60, 1);
        background-blend-mode: normal;
        box-shadow: 0px 32rpx 64rpx rgba(255, 131, 60, 0.5);
        border-radius: 50%;

        color: rgba(255, 255, 255, 1);
        letter-spacing: -0.34px;
        font-size: 28rpx;
        text-align: center;
        line-height: 200rpx;
    }

    .hd-img-model {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.4);

        .model-content {
            position: fixed;
            left: 0;
            bottom: -800rpx;
            width: 100%;
            height: 800rpx;
            padding: 60rpx;
            background: #fff;
            background-blend-mode: normal;
            border-radius: 48rpx 48rpx 0px 0px;
            mix-blend-mode: normal;
            z-index: 1;
            box-sizing: border-box;
        }

        .head-list {
            display: flex;
            flex-wrap: wrap;
        }

        .head-item {
            flex: auto;
            width: 20%;
            border-radius: 18rpx;

            image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 19rpx;
            }
        }
    }
}